<!--
     Multiplication table visualizer
-->
<html>
   <head>
      <title>Multtable Visualizer</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <link rel="icon" type="image/png" href="./images/favicon.png"></link>
      <link rel="stylesheet" href="./style/fonts.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/sliders.css" type="text/css"></link>
      <link rel="stylesheet" href="./visualizerFramework/visualizer.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/menu.css" type="text/css"></link>
      <link rel="stylesheet" href="./subsetDisplay/subsets.css" type="text/css"></link>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
       #vert-container {
          min-width: 20em;  /* Ensure same min width as CayleyDiagram page, for consistency */
       }

       #graphic {
          overflow-x: hidden;
          -webkit-user-drag: none;      /* prevents default drag behavior */
          -webkit-user-select: none;    /* prevents confusing cut-and-paste attempt in graphic */
       }

       #drag-image {
          -webkit-user-drag: none;      /* prevents annoying default drag behavior */
       }

       .graphic-lead {
          margin-top: 1.5em;
          margin-bottom: 0.5em;
       }

       #coloration-choice > div {
          margin-left: 5%;
       }
      </style>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script type="text/x-mathjax-config">
       MathJax.Hub.Config({
          CommonHTML: {
             scale: 100,   /* scale MathJax to match the HTML around it */
          },
          showMathMenu: false,   /* disable MathJax context menu (it interferes with subsetDisplay context menu) */
       });
       MathJax.Hub.processUpdateTime = 1000;  // allow MathJax to work longer at a stretch, improves initial load time
       MathJax.Hub.processSectionDelay = 0;   // no pause to let browser handle interaction -- only busy during loading
       MathJax.Hub.processUpdateDelay = 0;
      </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=MML_CHTML"></script>
      <script src="https://cdn.jsdelivr.net/npm/jquery-resizable-dom@0.32.0/dist/jquery-resizable.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
      <script src="./build/allGroupExplorer.js"></script>
      <script src="./build/allVisualizer.js"></script>
      <script src="./Multtable.js"></script>
   </head>
   <body class="vert">
      <div id="control-options" class="horiz">
         <button id="subset-button">Subsets</button>
         <button id="table-button">Table</button>
      </div>

      <div id="subset-control" class="fill-vert">
         <!-- This is filled in by subsetDisplay/subsets.html -->
      </div>

      <template id="drag-image-template">
         <img id="drag-image" src="${graphicContext.canvas.toDataURL()}" class="remove-on-clean" swapping="${swapping}" start="${start}" style="${style}">
      </template>

      <template id="node-label-template">
         <div id="node-label" class="tooltip remove-on-clean" row="${rowXcol.row}" col="${rowXcol.col}">
            ${MathML.sans(group.representation[element])}
         </div>
      </template>

      <div id="table-control" class="fill-vert control hidden">
         <div class="graphic-lead">Organize by subgroup:</div>
         <div id="organization-select" class="faux-select" action="toggleOrganizationChoices()">
            <ul id="organization-choices" class="faux-select-options hide-on-clean" style="width: 13em"></ul>
            <span id="organization-choice" class="faux-selection">none</span>
            <div class="faux-select-arrow"></div>
         </div>
         <template id="organization-choice-template">
            <li action="organizeBySubgroup(${subgroupIndex})">
               ${MathML.sans(MathML.sub('H', subgroupIndex))}, ${MathML.sansText('a subgroup of order')}
               ${MathML.sans('<mn>' + subgroup.order + '</mn>')}
            </li>
         </template>

         <div class="graphic-lead" style="margin-top: 3em">Separate cosets by:</div>
         <input id="separation-slider" type="range" min="0" max="100" value="0"> <!-- [0-100] => [0,box width] -->

         <form id="coloration-choice" class="graphic-lead" style="margin-bottom: 0">
            Default coloration:
            <div>
               <input id="Rainbow" name="coloration" type="radio" onclick="chooseColoration(Multtable.COLORATION.RAINBOW)" checked>
               <label for="Rainbow">Spectrum/rainbow</label>
            </div>
            <div>
               <input id="Grayscale" name="coloration" type="radio" onclick="chooseColoration(Multtable.COLORATION.GRAYSCALE)">
               <label for="Grayscale">Grayscale</label>
            </div>
            <div>
               <input id="None" name="coloration" type="radio" onclick="chooseColoration(Multtable.COLORATION.NONE)">
               <label for="None">None</label>
            </div>
         </form>
      </div>
   </body>
</html>
